import React, { useState, useContext } from "react"


const themes = {
    light: {
        foreground: "#000000",
        background: "#eeeeee"
    },
    dark: {
        foreground: "#ffffff",
        background: "#222222"
    }
}

const ThemeContext = React.createContext({
    theme: themes.light,
    toggle: () => { }
})


export default () => {
    const [theme, setTheme] = useState(themes.light)
    return (
        <ThemeContext.Provider value={{
            theme,
            toggle: () => {
                setTheme(theme === themes.light ? themes.dark : themes.light)
            }
        }}>
            <ToolBar />
        </ThemeContext.Provider>
    )
}

const ToolBar = () => {
    return <ThemeButton />;
}

const ThemeButton = () => {
    const context = useContext(ThemeContext)
    console.log(context);

    return <button onClick={context.toggle}
        style={{
            color: context.theme.foreground,
            background: context.theme.background
        }}>
        click me!
        </button>;
}